<template>
  <div style="height: 100%">
  </div>
</template>

<script>
  import Format from '@/utils/format'
  import EchartsMixins from '../echarts.mixins'

  export default {
    mixins: [EchartsMixins],
    data() {
      return {
        charts: '',
        xList: [],
        yList: [],
        zList: [],
        xyList: [],
        xyzList: [],
        // 监测点名称
        monitorName: '',
      }
    },
    computed: {
      options() {
        const Echarts = require('echarts')
        return {
          title: {
            text: this.monitorName + '速率曲线图',
            x: 'center',
            align: 'right'
          },
          grid: {
            left: '70px',
            right: '150px',
            bottom: '80px'
          },
          legend: {
            data: ['北向', '东向', '天向', '水平'],
            x: 'right',
            y: 'top',
            orient: 'vertical',
            padding: [55, 15, 0, 55],
            selected: {
              '北向': false, '东向': false, '天向': true, '水平': true
            }
          },
          toolbox: {
            right: '20',
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',

              label: {
                backgroundColor: '#505765'
              }
            },
            formatter: (params, ticket, callback) => {
              let that = this
              var contentArr = []
              for (var i = 0; i < params.length; i++) {
                var data = params[i]
                if (i === 0) {
                  contentArr.push(Format(new Date(data.value[0])))
                }
                contentArr.push(data.marker + data.seriesName + '速率：' + data.value[1] + 'mm/d')
              }
              let remark = params[0]?.data?.remark || ''
              remark && contentArr.push(`<p style='font-size:10px;' >${this.sliceStr(remark)}</p>`)
              return contentArr.join('<br/>')
            },

          },
          dataZoom: [
            {
              // X轴的滚动条形式的dataZoom
              type: 'slider',
              show: true,
              xAxisIndex: [0], // 关联的是X轴
              start: 0, // dataZoom滑块的起始位置，0%表示最开始的位置
              end: 100, // dataZoom滑块的结束位置，100%表示最末尾的位置
              handleSize: '80%', // 滑动条两端手柄的大小
              handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
              }
            },
            {
              // 内置形式的dataZoom，用于X轴
              type: 'inside',
              xAxisIndex: [0], // 关联的是X轴
              start: 0,
              end: 100
            },
            {
              // Y轴的滚动条形式的dataZoom
              type: 'slider',
              show: true,
              yAxisIndex: [0], // 关联的是Y轴
              start: 0, // Y轴dataZoom滑块的起始位置
              end: 100, // Y轴dataZoom滑块的结束位置
              handleSize: '80%', // 滑动条两端手柄的大小
              handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
              },
              // Y轴滚动条位于图表左侧
              left: '0%',
              // 控制滑块的长度
              height: '70%', // 根据需要调整
              // 控制滑块距离底部的位置
              bottom: '10%'
            },
            {
              // 内置形式的dataZoom，用于Y轴
              type: 'inside',
              yAxisIndex: [0], // 关联的是Y轴
              start: 0,
              end: 100
            }
          ]
          ,

          xAxis: {
            type: 'time',
            boundaryGap: false,
            axisLine: {onZero: false},
            axisLabel: { // 坐标轴标签样式设置
              showMaxLabel: true,
              formatter: function (value, index) { // 坐标轴文字展示样式处理
                return Echarts.format.formatTime('yyyy-MM-dd', new Date(value))
              },
            }
          },
          yAxis: {
            max: function (value) {
              if (value.max < 30) {
                return 60
              }
              return Math.ceil(value.max) * 2// 向上取整
            },
            min: function (value) {
              if (value.min > -30) {
                return -60
              }
              return Math.ceil(value.min) * 2// 向上取整
            },
            name: '速率(mm/d)',
            type: 'value'
          },

          series: [
            {
              name: '北向',
              type: 'line',

              smooth: false,
              symbol: 'none',
              symbolSize: 4,

              data: this.xList,

            },
            {
              name: '东向',
              type: 'line',

              smooth: false,
              symbol: 'none',
              symbolSize: 4,
              data: this.yList
            },
            {
              name: '天向',
              type: 'line',
              color: '#F0A609', // 直接设置系列颜色以确保与图例颜色一致
              lineStyle: {
                color: '#F0A609', // 折线颜色为橙红色
                width: 4, // 折线宽度
              },
              smooth: false,
              symbolSize: 4,
              showSymbol: false, // 显示折线图的数据点
              data: this.zList,
              markPoint: {  //最大值最小值
                symbolSize: 50,
                data: [
                  {type: 'max', name: 'Max'},
                  {type: 'min', name: 'Min'}
                ],
                label: {
                  position: "inside",
                  distance: 7,
                  formatter: function (data) {
                    return data.value + 'mm/d'
                  }
                },
                normal: {
                  // 节点的颜色，与折线颜色一致
                  borderColor: '#F0A609', // 节点边框的颜色
                  borderWidth: 6 // 节点边框的宽度
                }
              },
              markLine: {
                data: this.markLine,
              }
            },
            {
              name: '水平',
              type: 'line',
              color: '#5392F5', // 直接设置系列颜色以确保与图例颜色一致
              lineStyle: {
                color: '#5392F5', // 折线颜色
                width: 4, // 折线宽度
              },
              normal: {
                // 节点的颜色，与折线颜色一致
                borderColor: '#5392F5', // 节点边框的颜色
                borderWidth: 6 // 节点边框的宽度
              },
              markPoint: {  //最大值最小值
                symbolSize: 50,
                data: [
                  {type: 'max', name: 'Max'},
                  {type: 'min', name: 'Min'}
                ],
                label: {
                  position: "inside",
                  distance: 7,
                  formatter: function (data) {
                    return data.value + 'mm/d'
                  }
                },
                normal: {
                  // 节点的颜色，与折线颜色一致
                  borderColor: '#F0A609', // 节点边框的颜色
                  borderWidth: 6 // 节点边框的宽度
                }
              },
              showSymbol: false, // 显示折线图的数据点
              data: this.xyList,
              markLine: {
                data: this.markLine,
              }
            },

          ]
        }
      }
    },
    methods: {
      echartResize() {
        this.charts.resize()
      },
      updateEchart(data, monitorName) {
        // 清除现有图表数据
        this.charts.clear();
        this.markLine = []
        // 设置监测点名称
        this.monitorName = monitorName;

        // 更新数据
        this.xList = data.xSpeed;
        this.yList = data.ySpeed;
        this.zList = data.zSpeed;
        this.xyList = data.xySpeed;
        this.xyzList = data.xyzSpeed;

        // 计算Y轴数据的最大值和最小值
        const allYValues = [...this.yList, ...this.zList, ...this.xyList, ...this.xyzList];
        let yMaxValue = Math.max(...allYValues.map(item => item[1]));
        let yMinValue = Math.min(...allYValues.map(item => item[1]));

        // 根据需要调整最大值和最小值
        yMaxValue = yMaxValue < 30 ? 60 : Math.ceil(yMaxValue) *2;
        yMinValue = yMinValue > -30 ? -60 : Math.floor(yMinValue)*2;

        // 设置Y轴的最大值和最小值
        this.options.yAxis.max = yMaxValue;
        this.options.yAxis.min = yMinValue;

        // 配置dataZoom，这里需要根据你的具体配置来设置对应的索引
        const yDataZoomIndex = this.options.dataZoom.findIndex(dz => dz.yAxisIndex === 0);
        if (yDataZoomIndex !== -1) {
          this.options.dataZoom[yDataZoomIndex].startValue = yMinValue; // Y轴的最小值
          this.options.dataZoom[yDataZoomIndex].endValue = yMaxValue;   // Y轴的最大值
        }

        // 重新初始化图表并应用更新后的配置
        this.initEcharts();
        this.charts.setOption(this.options, true); // 使用 true 来使设置生效
        this.echartResize();
      },

    },
  }
</script>
